// import { Form, Input, Select } from 'element-react';
import { useState, useEffect } from 'react';
import { message, Pagination, Modal, Form, Input, Select, Button, Tooltip, Table, Tag, Space } from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined,
  SyncOutlined,
  AppstoreOutlined,
  EditOutlined,
} from '@ant-design/icons';
import { CategoryModelState, useDispatch, useSelector } from 'umi';
import 'element-theme-default';
import './index.less';
const { Option } = Select;

export default function ProdProdTag() {
  const { sysconfigList, sysconfigListlength } = useSelector((state: { category: CategoryModelState }) => state.category);
  const dispatch = useDispatch();
  //分页
  const [current, setCurrent] = useState()
  // 批量删除透明
  const [isflag, setFlag] = useState(false);
  //多选框选中
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [selectedRows, setSelectedRows] = useState(Number)
  // 删除开关
  const [delFalse, setDelFalse] = useState(true)
  // 删除
  const [delisvisible, setDelIsvisble] = useState(false)
  // 搜索隐藏
  const [visible, setVisible] = useState(true)
  // 参数名搜索
  const [paramKey, setParamKey] = useState('')
  // 单选删除
  const [ids, setIds] = useState()
  // 新增
  const [isvisible, setIsvisble] = useState(false)
  // 新增参数
  const [addparamKey, setAddparamKey] = useState('')
  const [addparamValue, setAddparamValue] = useState('')
  const [addremark, setAddremark] = useState('')
  // 修改
  const [modifyid, setModifyid] = useState('')
  useEffect(() => {
    dispatch({
      type: 'category/getsysConfig',
      payload: {
        current,
        paramKey
      }
    })
  }, [paramKey, current]);

  const columns = [
    {
      title: '参数名',
      dataIndex: 'paramKey',
      align: 'center'
    },
    {
      title: '参数值',
      dataIndex: 'paramValue',
      align: 'center'
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (e: any) => (
        <Space size="middle">
          <Button onClick={() => showModal(e)} type="primary" icon={<EditOutlined />}>
            编辑
          </Button>
          <Button onClick={() => deleteHandle(e)} type="primary" danger icon={<DeleteOutlined />}>
            删除
          </Button>
          <Modal
            title='提示'
            visible={delisvisible}
            onOk={openhideModal}
            onCancel={shuthideModal}
            okText="确认"
            cancelText="取消"
            mask={false}
          >
            确定进行[删除]操作？
          </Modal>
        </Space>
      ),
    },
  ];
  // 确定删除
  async function openhideModal() {
    setDelFalse(true)
    await dispatch({
      type: 'category/deletesysConfig',
      payload: delFalse ? [ids] : selectedRowKeys
    })
    setDelIsvisble(false)
    message.success('删除成功');
    await dispatch({
      type: 'category/getsysConfig',
      payload: {
        current,
        paramKey
      }
    })
  }
  // 取消删除
  function shuthideModal() {
    setDelIsvisble(false)
  }
  // 单个删除
  function deleteHandle(e: any) {
    setIds(e.key)
    setDelIsvisble(true)
  }
  const data = [];
  for (let i = 0; i < sysconfigList.length; i++) {
    data.push({
      key: sysconfigList[i].id,
      paramKey: sysconfigList[i].paramKey,
      paramValue: sysconfigList[i].paramValue,
      remark: sysconfigList[i].remark,
    });
  }
  //多选框选中
  function onSelectChange(selectedRowKeys: any, selectedRows: any) {
    setSelectedRows(selectedRows.length)
    selectedRows.length ? setFlag(true) : setFlag(false);
    setSelectedRowKeys(selectedRowKeys)
  }
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 批量删除
  function dels() {
    setDelIsvisble(true)
    setDelFalse(false)
  }
  // 清空
  function empty() {
    setSelectedRowKeys([])
    setSelectedRows(0)
    setFlag(false);
  }
  function showDrawer() {
    setVisible(!visible)
  }
  const [form] = Form.useForm();
  // 表单搜索
  const onFinish = (values: any) => {
    if (values.paramKey) {
      setParamKey(values.paramKey)
    } else {
      setParamKey('')
    }
  };
  function onReset() {
    form.resetFields();
  }
  // 增加 
  function showModal(e: any) {
    setModifyid(e.key)
    console.log('eeee',e);
    if (e.key) {
      form.setFieldsValue({
        paramKeys: e.paramKey,
        paramValue: e.paramValue,
        remark: e.remark
      })
    }
    setIsvisble(true)
  }
  function hideModal() {
    setIsvisble(false)
    form.setFieldsValue({
      paramKeys: '',
      paramValue: '',
      remark: ''
    })
  }
  // 新增 和 修改
  async function nohideModal() {
    console.log(addparamKey, addparamValue, addremark);
    if (modifyid) {
      await dispatch({
        type: 'category/modifyConfig',
        payload: {
          id:modifyid,
          paramKey: addparamKey,
          paramValue: addparamValue,
          remark: addremark,
          t: '1652428499314'
        }
      })
    } else {
      await dispatch({
        type: 'category/increaseConfig',
        payload: {
          paramKey: addparamKey,
          paramValue: addparamValue,
          remark: addremark,
          t: '1652428499314'
        }
      })
    }
    message.success('操作成功');
    setIsvisble(false)
    await dispatch({
      type: 'category/getsysConfig',
      payload: {
        current,
        paramKey
      }
    })
  }
  return (
    <div className="prod-prodTag">
      <div style={visible == false ? { display: 'none' } : { display: 'block' }}>
        <Form
          layout="inline"
          form={form}
          name="control-hooks"
          onFinish={onFinish}
        >
          <Form.Item name="paramKey" label="参数名">
            <Input placeholder="参数名" value={paramKey} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
              搜索
            </Button>
            <Button onClick={onReset} htmlType="button" icon={<DeleteOutlined />}>清空</Button>
          </Form.Item>
        </Form>
      </div>
      <div className="avue-crud">
        <div className="avue-crud-left">
          <Space size="middle">
            <Button type="primary" icon={<PlusOutlined />} size="small" onClick={showModal}>
              新增
            </Button>
            <Modal
              bodyStyle={{ width: "517px", height: '317px' }}
              width={617}
              title="新增"
              visible={isvisible}
              onOk={nohideModal}
              onCancel={hideModal}
              okText="确认"
              cancelText="取消"
              destroyOnClose={true}
            >
              <Form layout="inline"
                name="control-hooks"
                form={form}
              >
                <Form.Item style={{ marginBottom: '20px' }} name="paramKeys" label='参数名' rules={[{ required: true }]}>
                  <Input placeholder="参数名"  style={{ width: '450px' }} onChange={(e) => {
                    setAddparamKey(e.target.value)
                  }} />
                </Form.Item>
                <Form.Item name="paramValue" label='参数值' rules={[{ required: true }]} style={{ width: '499px', marginBottom: '20px' }} >
                  <Input placeholder="参数值"  onChange={(e) => {
                    setAddparamValue(e.target.value)
                  }} />
                </Form.Item>
                <Form.Item name="remark" label='备注' style={{ width: '499px' }} >
                  <Input style={{ marginLeft: '26px' }} placeholder="备注"  onChange={(e) => {
                    setAddremark(e.target.value)
                  }} />
                </Form.Item>
              </Form>
            </Modal>
            <Button onClick={dels} type="primary" danger className={isflag == true ? '' : 'dels'}>
              批量删除
            </Button>
          </Space>
        </div>
        <div className="avue-crud-right">
          <Tooltip title="search">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="search">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="search">
            <Button onClick={showDrawer}
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
        </div>
      </div>
      <div className='avue-crud__tip'>
        <span className="avue-crud__tip-name">
          当前表格已选择
          <span className="avue-crud__tip-count">{selectedRows! > 0 ? selectedRows : 0}</span>
          项
        </span>
        <button onClick={empty} className='el-button el-button--text el-button--small'>
          <span>清空</span>
        </button>
      </div>
      <Table pagination={false} rowSelection={rowSelection} columns={columns} dataSource={data} />
      <div className='paging'>
        <span>共{sysconfigListlength}条</span>
        <Pagination
          showQuickJumper
          defaultCurrent={1}
          total={100}
          showSizeChanger={true}
          showLessItems={true}
          onChange={(current: any) => {
            setCurrent(current)

          }} />
      </div>
    </div>
  );
}
